<template>
  <!--订单列表页-->
  <view class="order">
    <!--搜索组件-->
    <view class="search">
      <uni-search-bar v-model="state.query.search.kw" bgColor="#dcdcdc" radius="5" placeholder="搜索" clearButton="auto"
                      cancelButton="none" @confirm="search"
      />
    </view>
    <!--过滤组件-->
    <view class="filter">
      <view class="status-list">
        <view @tap="switchOrderType('ALL')" class="status-item"
              :class="state.query.search.status === 'ALL' ? 'status-item-active' : ''">全部
        </view>
        <view @tap="switchOrderType('UN_PAY')" class="status-item"
              :class="state.query.search.status === 'UN_PAY' ? 'status-item-active' : ''">待付款
        </view>
        <view @tap="switchOrderType('UN_RECEIVED')" class="status-item"
              :class="state.query.search.status === 'UN_RECEIVED' ? 'status-item-active' : ''">待收货
        </view>
        <view @tap="switchOrderType('UN_REVIEW')" class="status-item"
              :class="state.query.search.status === 'UN_REVIEW' ? 'status-item-active' : ''">待评价
        </view>
        <view @tap="switchOrderType('AFTER_SALE')" class="status-item"
              :class="state.query.search.status === 'AFTER_SALE' ? 'status-item-active' : ''">退换/售后
        </view>
      </view>
    </view>
    <!--订单列表-->
    <scroll-view @scrolltolower="loadMore" :scroll-y="true" :style="{height: (windowHeight - 44 - 56 - 45) + 'px'}">
      <view class="list">
        <view class="item uni-pr-5" v-for="(order, idx) in state.orders" :key="idx">
          <view class="top">
            <view class="item-top">
              <!-- 只有一件商品时只展示第一个商品的信息 -->
              <view class="single-product" v-if="order.products.length <= 1">
                <view class="left">
                  <navigator :url="'/pages/goods/goods?id=' + order.products[0].skuId">
                    <image class="product-image-item" style="width: 80px; height: 100px"
                           :src="order.products[0].thumbCover"></image>
                  </navigator>
                </view>
                <view class="right">
                  <view class="right-top">
                    <navigator :url="'/pages/goods/goods?id=' + order.products[0].skuId">
                      <text class="name">{{ order.products[0].name }}</text>
                    </navigator>
                  </view>
                  <view class="uni-pt-5 right-spec">
                    <text>{{ order.products[0].spec }}</text>
                  </view>
                </view>
              </view>
              <!-- 有多件商品时，只展示商品的封面图 -->
              <view class="multi-product" v-else>
                <view class="product-image-item"
                      v-for="(orderProductItem, orderProductIdx) in order.products">
                  <navigator :url="'/pages/goods/goods?id=' + orderProductItem.skuId">
                    <image style="width: 80px; height: 100px"
                           :key="orderProductIdx"
                           :src="orderProductItem.thumbCover"></image>
                  </navigator>
                </view>
              </view>
            </view>
            <view class="item-bottom">
              <view class="sales">
                <text>共 {{ order.count }} 件</text>
              </view>
              <view class="price">
                <text class="price-title">实付</text>
                <text class="price-content uni-ml-2">￥{{ order.bill.actualPay }}</text>
              </view>
            </view>
          </view>
          <view class="bottom uni-pb-5">
            <view class="order-status uni-ml-5">
              <text>{{order.statusString}}</text>
            </view>
            <view class="btn-grp">
              <view class="order-btn" v-if="order.status==='DONE'">
                <text class="btn-txt btn-txt-default">评价</text>
              </view>
              <view class="order-btn" v-if="order.reviewStatus==='Y'">
                <text class="btn-txt btn-txt-default">追评</text>
              </view>
              <view class="order-btn">
                <text class="btn-txt btn-txt-default" @tap="viewDetail(order)">详情</text>
              </view>
              <view class="order-btn" v-if="order.status==='WAIT_RECEIVING'" @tap="confirmOrder(order.number)">
                <text class="btn-txt btn-txt-notice">已收货</text>
              </view>
              <view class="order-btn" v-if="order.status==='DONE'">
                <text class="btn-txt btn-txt-notice">申请售后</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <uni-load-more :status="state.load.status"></uni-load-more>
    </scroll-view>
  </view>
</template>
<script setup lang="ts">
import {ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import type {OrderBriefInfoType, OrderQueryType} from "@/types/order";
import {confirmReceived, queryOrdersWithPagination} from "@/services/order";


const {windowHeight} = uni.getSystemInfoSync()

const state = ref({
  orders: [] as Array<OrderBriefInfoType>,
  load: {
    status: "more",
    finish: false
  },
  query: {
    search: {
      kw: "",
      status: "",
      page: {
        page: 1,
        size: 10,
        orders: []
      },
      createTime: [] as number[]
    } as OrderQueryType,

  }
})

const search = (res: any) => {
  state.value.query.search.kw = res.value
  resetAndGetOrderListData()
}

const switchOrderType = (status: string) => {
  state.value.query.search.status = status
  resetAndGetOrderListData()
}
/**
 * 确认收货
 * @param number
 */
const confirmOrder = (number: string) => {
  confirmReceived(number).then((r) => {
    if (r.code === 0) {
      uni.showToast({
        title: "已收货",
        icon: "none"
      })
      // 刷新页面
      resetAndGetOrderListData()
    } else {
      uni.showToast({
        title: r.msg,
        icon: "none"
      })
    }
  })
}
const viewDetail = (orderItem: any) => {
  uni.navigateTo({
    url: "/pages/order/detail?id=" + orderItem.id
  })
}
/**
 * 根据现有的查询、分页参数获取订单数据，同时将新数据追加到列表
 */
const getOrderListData = async () => {
  state.value.load.status = "loading"
  await queryOrdersWithPagination(state.value.query.search).then((r) => {
    if (r.code === 0) {
      state.value.orders.push(...r.data.list)
      state.value.load.status = "more"
      if (state.value.query.search.page.page >= r.data.pages) {
        state.value.load.status = "no-more"
        state.value.load.finish = true
      }
    } else {
      uni.showToast({
        title: r.msg,
        icon: "none"
      })
      state.value.load.status = "no-more"
    }
  }).catch(() => {
    state.value.load.status = "no-more"
  })
}
/**
 * 重置并获取第一页数据
 * 用于切换订单类型、搜索订单时的查询
 */
const resetAndGetOrderListData = () => {
  // 重置数据列表
  state.value.orders = []
  // 重置分页参数
  state.value.query.search.page.page = 1
  // 使用新参数调用接口
  getOrderListData()
}

const loadMore = () => {
  if (state.value.load.finish) {
    return
  }
  state.value.query.search.page.page += 1
  getOrderListData()
}
onLoad((params: any) => {
  console.log("goods params: ", params)
  if (params.status) {
    state.value.query.search.status = params.status
  }
  // 初始加载数据
  resetAndGetOrderListData()
})
</script>
<style lang="scss">
.order {
  .filter {
    height: 45px;

    .status-list {
      margin: 0 20px;
      display: flex;
      justify-content: space-between;

      .status-item {
        font-size: 14px;
        padding: 10px 0;
      }

      .status-item-active {
        color: $uni-color-error;
        border-bottom: 2px solid #dd524d;
      }
    }

  }

  .list {
    .item {
      background-color: #fff;
      margin-bottom: 10px;

      .top {
        padding: 10px 0;

        .item-top {
          padding: 10px 20px;

          .single-product {
            display: flex;

            .right {
              margin-left: 20px;

              .right-spec {
                font-size: $uni-font-size-sm;
                color: $uni-color-subtitle;
              }
            }
          }

          .multi-product {
            display: flex;
            justify-content: flex-start;

            .product-image-item {
              margin-right: 5px;
              border: 1px solid #f0f0f0;
            }
          }
        }

        .item-bottom {
          display: flex;
          justify-content: flex-end;
          font-size: 14px;
          padding-right: 20px;

          .sales {
            margin-right: 10px;
            color: $uni-text-color-grey;
          }

          .price {
            .price-content {
              font-weight: bold;
              color: $uni-color-error;
            }
          }
        }
      }

      .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .order-status {
          font-size: $uni-font-size-sm;
          color: $uni-text-color-grey;
          font-weight: bold;
        }
        .btn-grp {
          display: flex;
          justify-content: flex-end;
          font-size: 14px;

          .order-btn {
            margin-left: 5px;
          }

          uni-button {
            font-size: 12px;
          }
        }
      }
    }
  }
}

.btn-txt {
  display: inline-block;
  border: 1px solid $uni-border-color;
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 10px;
}

.btn-txt-notice {
  border-color: #e43d33;
  color: #e43d33;
}
</style>